<template>
  <div class="goods-tabs">
    <nav>
      <a
        href="javascript:;"
        :class="{ active: activeName === 'detail' }"
        @click="clickTab('detail')"
        >商品详情</a
      >

      <a
        href="javascript:;"
        :class="{ active: activeName === 'comment' }"
        @click="clickTab('comment')"
        >商品留言</a
      >
    </nav>
    <!-- 切换内容的地方 -->
    <component :is="'goods-' + activeName" v-bind="$attrs" />
  </div>
</template>
<script lang="ts">
import GoodsDetail from "./goods-detail.vue";
import goodsComment from "./goods-comment.vue";
export default {
  components: { GoodsDetail, goodsComment }
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
const activeName = ref("comment");
const clickTab = (name: string) => {
  activeName.value = name;
};
</script>
<style lang="scss" scoped>
.goods-tabs {
  min-height: 600px;
  background: #fff;

  nav {
    display: flex;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #f5f5f5;

    a {
      position: relative;
      padding: 0 40px;
      font-size: 18px;

      > span {
        margin-left: 10px;
        font-size: 16px;
        color: $priceColor;
      }

      &:first-child {
        border-right: 1px solid #f5f5f5;
      }

      &.active {
        &::before {
          position: absolute;
          bottom: -1px;
          left: 40px;
          width: 72px;
          height: 2px;
          content: "";
          background: $xtxColor;
        }
      }
    }
  }
}
</style>
